<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="articleList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="100"/>
      <el-table-column
        label="id"
        width="100">
        <template slot-scope="scope">{{ scope.row.articleId }}</template>
      </el-table-column>
      <el-table-column
        label="标题"
        width="120">
        <template slot-scope="scope">
          <span class="name_style">{{ scope.row.articleName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="分类"
        width="120">
        <template slot-scope="scope">
          <el-tag>
            {{ scope.row.articleSort }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="标签"
        width="100">
        <template slot-scope="scope">
          <el-tag type="success">
            {{ scope.row.articleTag }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="浏览数"
        width="100">
        <template slot-scope="scope">
          <el-tag
            type="success"
            class="tagStyle">
            {{ scope.row.clickNum }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="发布日期"
        width="160">
        <template slot-scope="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column
        label="状态"
        width="120">
        <template slot-scope="scope">{{ scope.row.isShow }}</template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="120">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native.prevent="updateRow(scope)">
            编辑
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="deleteRow(scope.$index, articleList)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getArticleList } from '@/api/article'

export default {
  name: 'Article',
  data() {
    return {
      pageNum: 1,
      total: 0,
      pageSize: 10,
      currentPage: 5,
      listLoading: false,
      articleList: [{
        articleContent: '',
        articleDescribe: '',
        articleId: 1,
        articleImg: '',
        articleName: '',
        articleSort: '',
        articleTag: '',
        clickNum: 1,
        createTime: '',
        updateTime: '',
        isShow: 1
      }],
      multipleSelection: [],
      tags: [
        { name: '标签二', type: 'success' }
      ]
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    getDataList() {
      getArticleList({ pageNum: this.pageNum, pageSize: this.pageSize }).then(res => {
        this.total = res.total
        this.articleList = res.data
        console.log(this.articleList)
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteRow(scope, tableData) {
      console.log(scope)
      console.log(tableData)
    },
    updateRow(scope) {
      console.log(scope.row)
      this.$router.push({
        path: '/updateArticle',
        query: { article: JSON.stringify(scope.row) }
      })
    }
  }
}
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.tagStyle {
  border-radius: 45%;
  background-color: RGB(0,224,255);
  color: white;
  height: 30px;
}
.name_style {
  color: rgb(64,169,255);
}
</style>
